<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.loading{
				margin: 0 auto;
				width: 300px;
				height: 300px;
				position: relative;
			}
			.circle{
				width: 300px;
				height: 300px;
				position:absolute;
				left: 0;
				top: 0;
			}
			.small{
				width: 30px;
				height: 30px;
				background: #00FFFF;
				margin: 10px auto;
				border-radius: 15px;
				animation: loading 1s infinite;
			}
			@keyframes loading{
				from{
					opacity: 1;
					width: 60px;
					height: 60px;
				}
				to{
					opacity: 0.2;
					
				}
			}
			
			.loading .circle:nth-child(1){
				transform: rotate(45deg);
				animation: loading 1s infinite;
			}
			.loading .circle:nth-child(2){
				transform: rotate(90deg);
				animation: loading 1s infinite 0.15s;
			}
			.loading .circle:nth-child(3){
				transform: rotate(135deg);
				animation: loading 1s infinite 0.2s;
			}
			.loading .circle:nth-child(4){
				transform: rotate(180deg);
				animation: loading 1s infinite 0.3;
			}
			.loading .circle:nth-child(5){
				transform: rotate(225deg);
				animation: loading 1s infinite .4s;
			}
			.loading .circle:nth-child(6){
				transform: rotate(270deg);
				animation: loading 1s infinite .5s;
			}
			.loading .circle:nth-child(7){
				transform: rotate(315deg);
				animation: loading 1s infinite .6s;
			}
			
			
		</style>
	</head>
	<body>
		<div class="loading">
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
			<div class="circle">
				<div class="small"></div>
			</div>
		</div>
	</body>
</html>
